<template>
  <el-container direction="vertical">
    <el-form inline @submit.native.prevent @keyup.enter.native="search">
      <el-row type="flex" justify="space-between">
        <div class="left">
          <el-form-item>
            <el-input v-model="params.name" placeholder="请输入角色名称" clearable class="input-240" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </div>
        <div class="right">
          <el-button type="text" icon="el-icon-fa-plus-circle" @click="create">新增</el-button>
        </div>
      </el-row>
    </el-form>
    <el-table v-loading="loading" element-loading-text="拼命加载中" :data="page.content" border height="100%">
      <el-table-column prop="name" align="center" label="名称" />
      <el-table-column prop="age" align="center" label="年龄" />
      <el-table-column prop="mobile" align="center" label="电话" />
      <el-table-column
          fixed="right"
          label="操作"
          width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="page.pageSize" :total="page.total"
          :page-sizes="[10, 20, 30, 40]"
          :current-page="page.current"
      />
    </div>
    <el-dialog title="编辑" :visible.sync="formVisible" width="520px">
      <forms ref="form" :data="formData" />
      <div slot="footer">
        <el-button @click="hide">取 消</el-button>
        <el-button @click="submit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  import Forms from "./form";

  const randomData = size => {
    const result = [];
    while (size > 0) {
      size--;
      result.push({
        name: "name" + size,
        age: 12,
        mobile: "保密"
      });
    }
    return result;
  };

  export default {
    name: "demo_basic_view",
    data() {
      return {
        type: 1,
        formVisible: false,
        page: {},
        formData: {},
        loading: false,
        params: {
          name: "",
          pageNumber: 1,
          pageSize: 10
        }
      };
    },
    components: {
      forms: Forms
    },
    mounted() {
      this.search();
    },
    methods: {
      search() {
        this.params.name = this.params.name ? this.params.name.trim() : "";
        this.loading = true;
        this.getData(this.params).then(page => {
          this.loading = false;
          this.page = page;
        });
      },
      create() {
        this.type = 1;
        this.formData = {};
        this.formVisible = true;
      },
      edit(data) {
        this.type = 2;
        this.formData = Object.assign({}, data);
        this.formVisible = true;
      },
      hide() {
        const { resetFields } = this.$refs.form.get();
        this.formVisible = false;
        resetFields();
      },
      submit() {
        const { validate } = this.$refs.form.get();
        validate(success => {
          if (!success) {
            return;
          }
          this.save(this.formData, this.type).then(err => {
            if (err) {
              this.$message.info(err);
              return;
            }
            this.hide();
            this.search();
          });
        });
      },
      del(id) {
        this.$confirm("确认删除", "提示").then(() => {
          this.remove(id).then(err => {
            if (err) {
              this.$message.error(err);
            } else {
              this.search();
            }
          });
        }).catch(() => {
        });
      },
      save(formData, type) {
        console.log(type, formData);
        const errors = null;
        return Promise.resolve(errors);
      },
      remove(id) {
        console.log("remote remove id: ", id);
        const errors = "服务器异常, 删除失败";
        return Promise.resolve(errors);
      },
      sizeChange(val) {
        this.params.pageNumber = 1;
        this.params.pageSize = val;
        this.search();
      },
      currentChange(val) {
        this.params.pageNumber = val;
        this.search();
      },
      getData(params) {
        console.log("数据请求参数", params);
        return new Promise(resolve => {
          setTimeout(() => {
            const pageNumber = params.pageNumber || 1;
            const pageSize = params.pageSize || 10;
            resolve({
              pageSize: pageSize,
              pageNumber: pageNumber,
              total: 100,
              current: pageNumber,
              content: randomData(pageSize)
            });
          }, 800);
        });
      }
    }
  };
</script>

<style scoped>

</style>
